<template>
  <div class="p-2">
    <Row :gutter="[4, 16]">
      <Col :span="6">
      <Card title="示例01-404">
        <div class="infoArea">
          <Page404 />
        </div>
      </Card>
      </Col>
      <Col :span="6">
      <Card title="示例02-403">
        <div class="infoArea">
          <Page403 />
        </div>
      </Card>
      </Col>
      <Col :span="6">
      <Card title="示例03-500">
        <div class="infoArea">
          <Page500 />
        </div>
      </Card>
      </Col>
      <Col :span="6">
      <Card title="示例04-网络错误">
        <div class="infoArea">
          <Page601 />
        </div>
      </Card>
      </Col>
    </Row>
    <Row :gutter="[4, 16]">
      <Col :span="6">
      <Card title="示例05-无数据">
        <div class="infoArea">
          <Page602 />
        </div>
      </Card>
      </Col>
      <Col :span="6">
      <Card title="示例02">
        <div class="infoArea">
        </div>
      </Card>
      </Col>
      <Col :span="6">
      <Card title="示例03">
        <div class="infoArea">
        </div>
      </Card>
      </Col>
      <Col :span="6">
      <Card title="示例04">
        <div class="infoArea">
        </div>
      </Card>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, unref, nextTick } from 'vue';
import { Card, Row, Col, Spin, Result, Button } from 'ant-design-vue';
import Page404 from './exception/404.vue';
import Page403 from './exception/403.vue';
import Page500 from './exception/500.vue';
import Page601 from './exception/601.vue';
import Page602 from './exception/602.vue';

// 默认执行一次
onMounted(async () => {
});


</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}

:deep(.ant-col) {
  width: 100%;
  padding-right: 0px;
}

.infoArea {
  // display: flex;
  // justify-content: space-between;
  // padding: 0 10%;
  width: 100%;
  // height: 100%;
  height: 500px;
}
</style>